/* ==========================================================
   Measurement Method Block ("Our Five-Step Measurement Discipline")
   File: wwwroot/css/measurement-method.css
   Used by: Views/Partials/blocklist/Components/measurementMethodBlock.cshtml
   Fluid layout: same scaling as the other blocks (6.8vw gutter).
   ========================================================== */
.mm {
  --mm-navy: #14256b;
  --mm-orange: #ff9a45;
  --mm-peach: #fff1e6;
  --mm-peach-line: #ffc9a0;
  --mm-bg: #f3f6fc;
  --mm-line: #e7eaf1;
  --mm-gutter: 6.8vw;
  --mm-node: clamp(30px, 2.7vw, 70px);
  --mm-ease: cubic-bezier(.65, 0, .35, 1);
  --mm-ease-out: cubic-bezier(.16, 1, .3, 1);

  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  background: var(--mm-bg);
  padding: clamp(44px, 6.8vw, 176px) var(--mm-gutter) clamp(44px, 5vw, 130px);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--mm-navy);
  -webkit-font-smoothing: antialiased;
}
.mm *, .mm *::before, .mm *::after { box-sizing: border-box; margin: 0; padding: 0; }
.mm__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Heading ---------- */
.mm__eyebrow {
  margin-bottom: clamp(10px, 1.1vw, 28px);
  font-size: clamp(11px, .85vw, 22px);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mm__heading {
  font-size: clamp(24px, 2.08vw, 54px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mm-navy);
}

/* ---------- Timeline ---------- */
.mm__timeline {
  position: relative;
  margin-top: clamp(18px, 2vw, 52px);
}
.mm__track, .mm__fill {
  position: absolute;
  top: calc(var(--mm-node) / 2);
  left: calc(var(--mm-node) / 2);
  height: 1px;
}
.mm__track { right: calc(var(--mm-node) / 2); background: var(--mm-line); }
.mm__fill {
  width: 0;
  height: 2px;
  margin-top: -.5px;
  background: var(--mm-peach-line);
  transition: width 1s var(--mm-ease);
}
.mm__nodes {
  position: relative;
  display: flex;
  justify-content: space-between;
  list-style: none;
}
.mm__node {
  display: grid;
  place-items: center;
  width: var(--mm-node);
  height: var(--mm-node);
  border: 1px solid var(--mm-peach-line);
  border-radius: 50%;
  background: var(--mm-peach);
  font: 600 clamp(11px, .8vw, 21px) "Poppins", sans-serif;
  color: var(--mm-navy);
  cursor: pointer;
  transition: background-color .6s var(--mm-ease), border-color .6s var(--mm-ease), color .6s var(--mm-ease), transform .5s var(--mm-ease-out), box-shadow .6s ease;
}
.mm__node:hover { transform: scale(1.08); }
.mm__node.is-active {
  background: var(--mm-orange);
  border-color: var(--mm-orange);
  color: var(--mm-navy);
  box-shadow: 0 0 0 6px rgba(255, 154, 69, .16);
}
.mm__node:focus-visible { outline: 2px solid var(--mm-navy); outline-offset: 3px; }

/* ---------- Body: deck (left) + worked example (right) ---------- */
.mm__body {
  display: grid;
  grid-template-columns: 37% minmax(0, 1fr);
  gap: clamp(24px, 3vw, 78px);
  align-items: start;
  margin-top: clamp(32px, 6vw, 156px);
}

/* card deck */
.mm__deck {
  position: relative;
  width: clamp(240px, 19.1vw, 500px);
  height: clamp(200px, 16vw, 420px);
}
.mm__deck::after {                      /* soft shadow under the stack */
  content: "";
  position: absolute;
  left: 8%;
  right: -30%;
  bottom: -14%;
  height: 30%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(20, 37, 107, .16), transparent 70%);
  filter: blur(6px);
}
.mm__card {
  --d: 0;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.35vw, 36px);
  border-radius: clamp(3px, .25vw, 6px);
  background-color: #fff;
  box-shadow: 0 6px 18px rgba(20, 37, 107, .08);
  color: #fff;
  transform-origin: 0 50%;
  /* cards behind peek out to the right, a little shorter each */
  transform: translate3d(calc(var(--d) * 1.5vw), 0, 0) scaleY(calc(1 - var(--d) * .06));
  transition: transform 1s var(--mm-ease-out), background-color .8s var(--mm-ease), opacity .7s ease, box-shadow .8s ease;
}
.mm__card.is-front { background-color: var(--mm-navy); box-shadow: 0 18px 40px rgba(20, 37, 107, .22); }
/* the card that just left glides out to the left and fades */
.mm__card.is-gone {
  transform: translate3d(-4vw, 1vw, 0) rotate(-6deg) scale(.94);
  opacity: 0;
  transition: transform .9s var(--mm-ease), opacity .6s ease, background-color .4s ease;
}
.mm__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.mm__card-num {
  font-size: clamp(26px, 2.4vw, 62px);
  font-weight: 600;
  line-height: 1;
  color: var(--mm-orange);
}
.mm__card-step {
  padding-top: .4em;
  font-size: clamp(10px, .72vw, 19px);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mm-orange);
}
.mm__card-body { margin-top: auto; }
.mm__card-title {
  margin-bottom: clamp(6px, .6vw, 16px);
  font-size: clamp(15px, 1.2vw, 31px);
  font-weight: 600;
  line-height: 1.3;
}
.mm__card-text {
  font-size: clamp(13px, 1.12vw, 29px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, .95);
}
/* only the front card shows its text; lines rise in one after another */
.mm__card .mm__rise { opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .3s ease; }
.mm__card.is-front .mm__rise {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease var(--rd, .4s), transform .8s var(--mm-ease-out) var(--rd, .4s);
}

/* prev / next */
.mm__controls {
  display: flex;
  gap: clamp(8px, .7vw, 18px);
  margin-top: clamp(32px, 4.8vw, 124px);
}
.mm__btn {
  display: grid;
  place-items: center;
  width: clamp(32px, 2.5vw, 64px);
  height: clamp(32px, 2.5vw, 64px);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .5s var(--mm-ease-out), background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.mm__btn svg { width: 42%; height: 42%; }
.mm__btn--prev { background: #fff; color: var(--mm-navy); box-shadow: 0 4px 14px rgba(20, 37, 107, .08); }
.mm__btn--next { background: var(--mm-orange); color: #fff; }
.mm__btn--prev:hover { background: var(--mm-navy); color: #fff; }
.mm__btn--next:hover { box-shadow: 0 8px 20px rgba(255, 154, 69, .4); }
.mm__btn:hover { transform: scale(1.08); }
.mm__btn:focus-visible { outline: 2px solid var(--mm-navy); outline-offset: 3px; }

/* ---------- Worked example box ---------- */
.mm__example {
  position: relative;
  margin-top: clamp(0px, 5.2vw, 134px);   /* sits beside the middle of the card; opens downwards */
  padding: clamp(16px, 1.15vw, 30px) clamp(16px, 1.15vw, 30px) clamp(14px, 1vw, 26px);
  border-radius: clamp(3px, .25vw, 6px);
  background: #fff;
  box-shadow: 0 6px 22px rgba(20, 37, 107, .05);
}
.mm__more {
  position: absolute;
  top: -.85em;
  right: clamp(8px, .6vw, 16px);
  padding: .45em 1em;
  border: 0;
  border-radius: 2px;
  background: var(--mm-orange);
  font: 500 clamp(10px, .68vw, 18px) "DM Sans", "Poppins", sans-serif;
  color: #fff;
  cursor: pointer;
  transition: background-color .4s ease, transform .4s var(--mm-ease-out), box-shadow .4s ease;
}
.mm__more:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(255, 154, 69, .35); }
.mm__more[aria-expanded="true"] { background: var(--mm-navy); }
.mm__more:focus-visible { outline: 2px solid var(--mm-navy); outline-offset: 2px; }
.mm__example-title {
  margin-bottom: clamp(4px, .35vw, 10px);
  font-size: clamp(14px, 1vw, 26px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--mm-navy);
}
.mm__example-note {
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(12px, .88vw, 23px);
  line-height: 1.55;
  color: var(--mm-navy);
}

/* table panel: opens smoothly inside the box */
.mm__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .7s var(--mm-ease);
}
.mm__panel.is-open { grid-template-rows: 1fr; }
.mm__panel > div { overflow: hidden; }
.mm__table {
  width: 100%;
  margin-top: clamp(14px, 1.2vw, 30px);
  border: 1px solid var(--mm-line);
  border-radius: clamp(4px, .35vw, 9px);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  table-layout: fixed;
}
.mm__c1 { width: 50%; } .mm__c2 { width: 25%; } .mm__c3 { width: 25%; }
.mm__table th,
.mm__table td {
  padding: clamp(10px, .95vw, 24px) clamp(12px, 1.1vw, 28px);
  border-bottom: 1px solid var(--mm-line);
  text-align: left;
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(12px, .88vw, 23px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--mm-navy);
}
.mm__table thead th { font-weight: 600; background: #f8f9fc; font-size: clamp(11px, .8vw, 21px); }
.mm__table .is-numeric { text-align: right; font-weight: 500; }
.mm__table tbody tr:last-child th,
.mm__table tbody tr:last-child td { border-bottom: 0; }
.mm__summary th, .mm__summary td { background: var(--mm-peach); }
.mm__summary th { font-family: "Poppins", sans-serif; font-weight: 600; }
.mm__table .is-muted { color: #6b7391; text-align: center; }
.mm__table .is-highlight { font-family: "Poppins", sans-serif; font-weight: 600; color: #f07d14; }
/* rows slide in one after another when the table opens */
.mm__table tbody tr { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .3s ease; }
.mm__panel.is-open .mm__table tbody tr {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease calc(.2s + var(--ri, 0) * .07s), transform .7s var(--mm-ease-out) calc(.2s + var(--ri, 0) * .07s);
}

/* ---------- Entrance (added by JS only) ---------- */
.mm.js-reveal .mm__fx { opacity: 0; transform: translateY(22px); }
.mm.js-reveal.is-visible .mm__fx {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease var(--fd, 0s), transform 1.1s var(--mm-ease-out) var(--fd, 0s);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) { .mm { --mm-gutter: 32px; } }
@media (max-width: 900px) {
  .mm { --mm-gutter: 24px; }
  .mm__body { grid-template-columns: 1fr; }
  .mm__example { margin-top: 8px; }
}
@media (max-width: 560px) {
  .mm { --mm-gutter: 20px; --mm-node: 30px; }
  .mm__deck { width: calc(100% - 64px); height: 210px; }
  .mm__card { transform: translate3d(calc(var(--d) * 12px), 0, 0) scaleY(calc(1 - var(--d) * .06)); }
  .mm__table th, .mm__table td { padding: 10px; }
  .mm__c1 { width: 46%; } .mm__c2, .mm__c3 { width: 27%; }
}
@media (prefers-reduced-motion: reduce) {
  .mm *, .mm *::before { transition: none !important; }
}